<template>
  <div class="log-page f-c">
    <div style="width: 245px;margin-bottom: 20px">
      <SwitchTabs
        v-model="searchParams.type"
        :data="[
          { name: '全部', value: ''},
          { name: '病害', value: '1'},
          { name: '虫害', value: '2'}
        ]"
        @change="onSearch"
      />
    </div>
    <el-form inline>
      <el-form-item label="名称">
        <el-input v-model="searchParams.name" clearable placeholder="" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchParams.status" clearable placeholder="">
          <el-option :value="0" label="正常" />
          <el-option :value="1" label="停用" />
        </el-select>
      </el-form-item>
      <el-form-item label="危害程度">
        <el-select v-model="searchParams.dangerLevel" clearable placeholder="">
          <el-option :value="1" label="主要" />
          <el-option :value="2" label="次要" />
        </el-select>
      </el-form-item>
      <el-form-item label="作物">
        <el-select v-model="searchParams.cropId" clearable placeholder="" multiple>
          <el-option v-for="item in options" :value="item.typeId" :label="item.typeName" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
        <el-button type="primary" style="margin-left: 15px" @click="onReset">清除</el-button>
      </el-form-item>
      <el-form-item />
    </el-form>
    <div class="line" />
    <div style="margin-bottom: 20px">
      <el-button type="primary" plain icon="el-icon-plus" @click="onAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="typeName" label="分类" align="center" />
        <el-table-column prop="dangerLevelName" label="危害程度" align="center" />
        <el-table-column prop="updateTime" label="更新日期" align="center" />
        <el-table-column prop="statusName" label="状态" align="center" />
        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="dialogEdit(scope.row)"
            >编辑 </el-button>
            <el-button
              v-if="scope.row.topFlag == 0"
              type="text"
              @click="onTop(scope.row, '1')"
            >置顶</el-button>
            <el-button
              v-if="scope.row.topFlag == 1"
              type="text"
              @click="onTop(scope.row, '0')"
            >取消置顶</el-button>
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              @click="onUpdateStatus(scope.row, '1')"
            >停用</el-button>
            <el-button
              v-if="scope.row.status == 1"
              type="text"
              @click="onUpdateStatus(scope.row, '0')"
            >启用</el-button>
            <el-button
              type="text"
              @click="onDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-drawer
      title="添加/编辑"
      :visible.sync="drawer"
      direction="rtl"
      size="456px"
    >
      <div class="drawer-content">
        <el-form ref="formRef" :model="ruleForm" label-position="top">
          <el-form-item prop="name" label="名称">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
          <el-form-item label="分类" prop="type">
            <el-select v-model="ruleForm.type" clearable placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="作物">
            <el-select v-model="ruleForm.cropId" clearable placeholder="" multiple>
              <el-option v-for="item in options" :value="item.typeId" :label="item.typeName" />
            </el-select>
          </el-form-item>
          <el-form-item label="物候期">
            <el-select v-model="ruleForm.growthPeriodId" clearable placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.growthId"
                :label="item.growthPeriodName"
                :value="item.growthId"
              />
            </el-select>
          </el-form-item>
          <div class="form-box">
            <div class="form-box-top">
              <el-form-item label="主推配方" style="margin-bottom: 0" />
            </div>
            <div class="form-box-body">
              <div v-for="(item,index) in ruleForm.list" :key="index" class="f-r a-c" style="margin-bottom: 10px">
                <span class="f-s">配方</span>
                <el-input v-model="item.formula" clearable style="margin: 0 20px" />
                <i class="el-icon-delete" @click.prevent="removeItem(index)" />
              </div>
              <div class="add-btn" @click="ruleForm.list.push({ formula: '' })">+ 添加</div>
            </div>
          </div>
          <el-form-item label="危害程度">
            <el-select v-model="ruleForm.dangerLevel" clearable placeholder="请选择">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="重点预防时间" />

          <el-tabs v-model="activeName">
            <el-tab-pane label="简介" name="Page1">
              <el-form-item prop="classificationAlias" label="分类及别名">
                <el-input v-model="ruleForm.classificationAlias" clearable />
              </el-form-item>
              <el-form-item prop="harmCrop" label="危害作物">
                <el-input v-model="ruleForm.harmCrop" clearable />
              </el-form-item>
              <el-form-item prop="harmShape" label="危害虫态及危害状">
                <el-input v-model="ruleForm.harmShape" clearable />
              </el-form-item>
              <el-form-item prop="occurrenceLaw" label="发生规律">
                <el-input v-model="ruleForm.occurrenceLaw" clearable />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="防治建议" name="Page2">
              <el-form-item label="农业防治">
                <el-input v-model="ruleForm.agriculturalControl" clearable placeholder="" />
              </el-form-item>
              <el-form-item label="物理防治">
                <el-input v-model="ruleForm.physicalControl" clearable placeholder="" />
              </el-form-item>
              <el-form-item label="生物防治">
                <el-input v-model="ruleForm.biologicalControl" clearable placeholder="" />
              </el-form-item>
              <el-form-item label="化学防治">
                <el-input v-model="ruleForm.chemicalControl" clearable placeholder="" />
              </el-form-item>
              <el-form-item label="虫态/危害状照片">
                <DragUpload :url="ruleForm.pics" @on-success="url => ruleForm.pics = url" />
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="onSave">提 交</el-button>
        </span>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import crud from '@/mixins/crud';
import { http_pest, http_growthPeriod } from '@/api';
export default {
  name: 'UserPage',
  mixins: [crud],
  data() {
    return {
      request: http_pest,
      deleteKey: 'pestId',
      searchParams: {
        type: '',
        name: '',
        status: 0,
        cropId: '',
        dangerLevel: ''
      },
      activeName: 'Page1',
      tableData: [
      ],
      options: [

      ],
      options2: [
        { label: '病害', value: '1' },
        { label: '虫害', value: '2' }
      ],
      options3: [],
      options4: [
        { label: '主要', value: '1' },
        { label: '次要', value: '2' }
      ],
      drawer: false,
      ruleForm: {
        id: undefined,
        type: '',
        name: '',
        classificationAlias: '',
        growthPeriodId: '',
        status: 0,
        cropId: '',
        dangerLevel: '',
        pics: '',
        list: [
        ]
      },
      resetForm: {
        id: undefined,
        type: '',
        name: '',
        classificationAlias: '',
        growthPeriodId: '',
        status: 0,
        cropId: '',
        dangerLevel: '',
        pics: '',
        list: [
        ]
      }
    }
  },
  created() {
    // 作物
    http_pest.cropList().then(res => {
      this.options = res.data
    })
    // 物候期
    http_growthPeriod.page().then(res => {
      console.log(res, '物候期')
      this.options3 = res.rows
    })
  },
  methods: {
    formatTableData(data) {
      data.forEach(el => {
        if (el.status == 0) {
          el.statusName = '正常'
        } else if (el.status == 1) {
          el.statusName = '停用'
        }

        if (el.dangerLevel == 1) {
          el.dangerLevelName = '主要'
        } else if (el.dangerLevel == 2) {
          el.dangerLevelName = '次要'
        }

        if (el.type == 1) {
          el.typeName = '病害'
        } else if (el.type == 2) {
          el.typeName = '虫害'
        }
      })
    },
    onAdd() {
      this.drawer = true
      this.ruleForm = {
        ...this.resetForm
      }
    },
    removeItem(index) {
      this.ruleForm.list.splice(index, 1)
    },
    dialogEdit(item) {
      this.drawer = true
      http_pest.read(item.pestId).then(res => {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = res.data[key]
        }
        this.ruleForm.cropId = this.ruleForm.cropId.split(',')
      })
    },
    onTop(item, value) {
      http_pest.updateStatus({
        pestId: item.pestId,
        topFlag: value
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
      })
    },
    onUpdateStatus(item, value) {
      http_pest.updateStatus({
        pestId: item.pestId,
        status: value
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
      })
    },
    onSave() {
      if (!this.ruleForm.list.length) return this.$message.warning('主推配方不能为空')
      http_pest[this.ruleForm.id ? 'update' : 'create']({
        ...this.ruleForm,
        cropId: this.ruleForm.cropId.join(',')
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
        this.drawer = false
      })
    }
  }

}
</script>

<style lang="scss">
.log-page {
  background-color: #fff;
  height: 100%;
  .form-box {
    width: 100%;
    background: #FAFAFA;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #DCDFE6;
    .form-box-top {
      border-bottom: 1px solid #DCDFE6;
      padding: 0 10px;
    }
    .form-box-body {
      padding: 10px;
      font-size: 14px;
      .add-btn {
        text-align: center;
        color: #1AAD19;
        margin: 16px 0;
        cursor: pointer;
      }
    }
  }
  .tree-node-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .tree {
    border-right: 1px solid #E8E8E8;
    width:205px;
    .tree-header {
      height: 53px;
      padding-left: 18px;
      width: 100%;
      .icon {
        background-image: url('~@/assets/tree-icon.png');
        width: 17px;
        height: 17px;
        background-repeat:no-repeat;
        background-size: 100% 100%;
        margin-right: 7px;
      }
      font-size: 16px;
      line-height: 16px;

      font-weight: 400;
      color: #333333;
      border-bottom: 1px solid #E8E8E8;
    }
    .tree-content {
      padding: 15px 20px;
    }
  }
  .content {
    padding: 20px;
    .content-header {
      font-size: 20px;

      font-weight: 400;
      color: #333333;
      margin-bottom: 25px;
    }
    .line {
      height:1px;
      background-color: #E8E8E8;
      margin-bottom: 20px;
    }
  }
  .drawer-content {
    padding: 20px;
    .el-select,
    .el-input {
      width: 100% !important;
    }
  }
}
</style>
